<template>
  <view class="container">
    <view class="page-header">
      <view class="page-title">表单组件演示</view>
      <view class="page-desc">展示各种表单输入组件和验证</view>
    </view>

    <!-- 基础输入框 -->
    <view class="section">
      <view class="section-title">基础输入框</view>
      <view class="demo-card">
        <view class="form-group">
          <view class="form-label">用户名</view>
          <input 
            class="form-input" 
            v-model="formData.username" 
            placeholder="请输入用户名"
            @blur="validateUsername"
          />
          <view class="form-error" v-if="errors.username">{{ errors.username }}</view>
        </view>
        
        <view class="form-group">
          <view class="form-label">密码</view>
          <input 
            class="form-input" 
            v-model="formData.password" 
            type="password"
            placeholder="请输入密码"
            @blur="validatePassword"
          />
          <view class="form-error" v-if="errors.password">{{ errors.password }}</view>
        </view>
        
        <view class="form-group">
          <view class="form-label">邮箱</view>
          <input 
            class="form-input" 
            v-model="formData.email" 
            type="email"
            placeholder="请输入邮箱地址"
            @blur="validateEmail"
          />
          <view class="form-error" v-if="errors.email">{{ errors.email }}</view>
        </view>
      </view>
    </view>

    <!-- 选择器 -->
    <view class="section">
      <view class="section-title">选择器</view>
      <view class="demo-card">
        <view class="form-group">
          <view class="form-label">性别</view>
          <picker 
            :value="genderIndex" 
            :range="genderOptions" 
            @change="onGenderChange"
          >
            <view class="picker-input">
              {{ genderOptions[genderIndex] || '请选择性别' }}
            </view>
          </picker>
        </view>
        
        <view class="form-group">
          <view class="form-label">城市</view>
          <picker 
            mode="region" 
            :value="region" 
            @change="onRegionChange"
          >
            <view class="picker-input">
              {{ region.join(' ') || '请选择城市' }}
            </view>
          </picker>
        </view>
        
        <view class="form-group">
          <view class="form-label">日期</view>
          <picker 
            mode="date" 
            :value="date" 
            @change="onDateChange"
          >
            <view class="picker-input">
              {{ date || '请选择日期' }}
            </view>
          </picker>
        </view>
      </view>
    </view>

    <!-- 开关和单选框 -->
    <view class="section">
      <view class="section-title">开关和单选框</view>
      <view class="demo-card">
        <view class="form-group">
          <view class="form-label">接收通知</view>
          <switch 
            :checked="formData.notifications" 
            @change="onNotificationChange"
            color="#007aff"
          />
        </view>
        
        <view class="form-group">
          <view class="form-label">兴趣爱好</view>
          <view class="checkbox-group">
            <label 
              class="checkbox-item" 
              v-for="(hobby, index) in hobbyOptions" 
              :key="index"
            >
              <checkbox 
                :value="hobby.value" 
                :checked="formData.hobbies.includes(hobby.value)"
                @change="onHobbyChange"
              />
              <text class="checkbox-text">{{ hobby.label }}</text>
            </label>
          </view>
        </view>
        
        <view class="form-group">
          <view class="form-label">职业</view>
          <view class="radio-group">
            <label 
              class="radio-item" 
              v-for="(job, index) in jobOptions" 
              :key="index"
            >
              <radio 
                :value="job.value" 
                :checked="formData.job === job.value"
                @change="onJobChange"
              />
              <text class="radio-text">{{ job.label }}</text>
            </label>
          </view>
        </view>
      </view>
    </view>

    <!-- 文本域和计数器 -->
    <view class="section">
      <view class="section-title">文本域和计数器</view>
      <view class="demo-card">
        <view class="form-group">
          <view class="form-label">个人简介</view>
          <textarea 
            class="form-textarea" 
            v-model="formData.bio" 
            placeholder="请输入个人简介"
            :maxlength="200"
            @input="onBioInput"
          />
          <view class="char-count">{{ formData.bio.length }}/200</view>
        </view>
        
        <view class="form-group">
          <view class="form-label">数量</view>
          <view class="counter-group">
            <button class="counter-btn" @click="decreaseCount">-</button>
            <input 
              class="counter-input" 
              v-model="formData.count" 
              type="number"
              @input="onCountInput"
            />
            <button class="counter-btn" @click="increaseCount">+</button>
          </view>
        </view>
      </view>
    </view>

    <!-- 滑块 -->
    <view class="section">
      <view class="section-title">滑块</view>
      <view class="demo-card">
        <view class="form-group">
          <view class="form-label">音量: {{ formData.volume }}%</view>
          <slider 
            :value="formData.volume" 
            @change="onVolumeChange"
            activeColor="#007aff"
            backgroundColor="#e9ecef"
            block-color="#007aff"
            block-size="20"
          />
        </view>
        
        <view class="form-group">
          <view class="form-label">评分: {{ formData.rating }}/5</view>
          <slider 
            :value="formData.rating" 
            min="1"
            max="5"
            step="1"
            @change="onRatingChange"
            activeColor="#ffc107"
            backgroundColor="#e9ecef"
            block-color="#ffc107"
            block-size="20"
          />
        </view>
      </view>
    </view>

    <!-- 表单验证和提交 -->
    <view class="section">
      <view class="section-title">表单验证和提交</view>
      <view class="demo-card">
        <view class="form-actions">
          <button class="btn btn-secondary" @click="resetForm">重置表单</button>
          <button class="btn btn-primary" @click="submitForm" :disabled="!isFormValid">
            提交表单
          </button>
        </view>
        <view class="form-summary" v-if="formSubmitted">
          <view class="summary-title">表单数据：</view>
          <view class="summary-content">{{ JSON.stringify(formData, null, 2) }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'FormDemo',
  data() {
    return {
      formData: {
        username: '',
        password: '',
        email: '',
        gender: '',
        region: [],
        date: '',
        notifications: false,
        hobbies: [],
        job: '',
        bio: '',
        count: 1,
        volume: 50,
        rating: 3
      },
      errors: {},
      genderIndex: 0,
      genderOptions: ['男', '女', '其他'],
      region: [],
      date: '',
      hobbyOptions: [
        { label: '阅读', value: 'reading' },
        { label: '运动', value: 'sports' },
        { label: '音乐', value: 'music' },
        { label: '旅行', value: 'travel' },
        { label: '游戏', value: 'gaming' }
      ],
      jobOptions: [
        { label: '学生', value: 'student' },
        { label: '上班族', value: 'worker' },
        { label: '自由职业', value: 'freelancer' },
        { label: '退休', value: 'retired' }
      ],
      formSubmitted: false
    }
  },
  computed: {
    isFormValid() {
      return this.formData.username && 
             this.formData.password && 
             this.formData.email && 
             Object.keys(this.errors).length === 0
    }
  },
  methods: {
    validateUsername() {
      if (!this.formData.username) {
        this.errors.username = '用户名不能为空'
      } else if (this.formData.username.length < 3) {
        this.errors.username = '用户名至少3个字符'
      } else {
        delete this.errors.username
      }
    },
    validatePassword() {
      if (!this.formData.password) {
        this.errors.password = '密码不能为空'
      } else if (this.formData.password.length < 6) {
        this.errors.password = '密码至少6个字符'
      } else {
        delete this.errors.password
      }
    },
    validateEmail() {
      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
      if (!this.formData.email) {
        this.errors.email = '邮箱不能为空'
      } else if (!emailRegex.test(this.formData.email)) {
        this.errors.email = '请输入有效的邮箱地址'
      } else {
        delete this.errors.email
      }
    },
    onGenderChange(e) {
      this.genderIndex = e.detail.value
      this.formData.gender = this.genderOptions[e.detail.value]
    },
    onRegionChange(e) {
      this.region = e.detail.value
    },
    onDateChange(e) {
      this.date = e.detail.value
    },
    onNotificationChange(e) {
      this.formData.notifications = e.detail.value
    },
    onHobbyChange(e) {
      const value = e.detail.value
      if (this.formData.hobbies.includes(value)) {
        this.formData.hobbies = this.formData.hobbies.filter(h => h !== value)
      } else {
        this.formData.hobbies.push(value)
      }
    },
    onJobChange(e) {
      this.formData.job = e.detail.value
    },
    onBioInput(e) {
      this.formData.bio = e.detail.value
    },
    onCountInput(e) {
      this.formData.count = parseInt(e.detail.value) || 1
    },
    increaseCount() {
      this.formData.count++
    },
    decreaseCount() {
      if (this.formData.count > 1) {
        this.formData.count--
      }
    },
    onVolumeChange(e) {
      this.formData.volume = e.detail.value
    },
    onRatingChange(e) {
      this.formData.rating = e.detail.value
    },
    resetForm() {
      this.formData = {
        username: '',
        password: '',
        email: '',
        gender: '',
        region: [],
        date: '',
        notifications: false,
        hobbies: [],
        job: '',
        bio: '',
        count: 1,
        volume: 50,
        rating: 3
      }
      this.errors = {}
      this.genderIndex = 0
      this.region = []
      this.date = ''
      this.formSubmitted = false
    },
    submitForm() {
      if (this.isFormValid) {
        this.formSubmitted = true
        uni.showToast({
          title: '提交成功',
          icon: 'success'
        })
      } else {
        uni.showToast({
          title: '请完善表单信息',
          icon: 'none'
        })
      }
    }
  }
}
</script>

<style scoped>
.page-header {
  text-align: center;
  margin-bottom: 40rpx;
}

.page-title {
  font-size: 40rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 15rpx;
}

.page-desc {
  font-size: 26rpx;
  color: #666;
}

.demo-card {
  background: white;
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
}

.form-group {
  margin-bottom: 30rpx;
}

.form-label {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 15rpx;
  font-weight: 500;
}

.form-input {
  width: 100%;
  padding: 20rpx;
  border: 2rpx solid #ddd;
  border-radius: 8rpx;
  font-size: 28rpx;
  background: #fff;
  box-sizing: border-box;
}

.form-input:focus {
  border-color: #007aff;
}

.form-error {
  color: #dc3545;
  font-size: 24rpx;
  margin-top: 10rpx;
}

.picker-input {
  padding: 20rpx;
  border: 2rpx solid #ddd;
  border-radius: 8rpx;
  font-size: 28rpx;
  background: #fff;
  color: #333;
}

.checkbox-group, .radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
}

.checkbox-item, .radio-item {
  display: flex;
  align-items: center;
  gap: 10rpx;
}

.checkbox-text, .radio-text {
  font-size: 26rpx;
  color: #333;
}

.form-textarea {
  width: 100%;
  min-height: 120rpx;
  padding: 20rpx;
  border: 2rpx solid #ddd;
  border-radius: 8rpx;
  font-size: 28rpx;
  background: #fff;
  box-sizing: border-box;
  resize: none;
}

.char-count {
  text-align: right;
  font-size: 22rpx;
  color: #666;
  margin-top: 10rpx;
}

.counter-group {
  display: flex;
  align-items: center;
  gap: 15rpx;
}

.counter-btn {
  width: 60rpx;
  height: 60rpx;
  border: 2rpx solid #ddd;
  background: #fff;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  color: #333;
}

.counter-input {
  width: 120rpx;
  height: 60rpx;
  border: 2rpx solid #ddd;
  border-radius: 8rpx;
  text-align: center;
  font-size: 28rpx;
  background: #fff;
}

.form-actions {
  display: flex;
  gap: 20rpx;
  margin-bottom: 30rpx;
}

.form-summary {
  background: #f8f9fa;
  border-radius: 8rpx;
  padding: 20rpx;
  border-left: 4rpx solid #007aff;
}

.summary-title {
  font-size: 26rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 15rpx;
}

.summary-content {
  font-family: 'Courier New', monospace;
  font-size: 22rpx;
  color: #666;
  line-height: 1.6;
  white-space: pre-wrap;
}

/* 响应式设计 */
@media (max-width: 750rpx) {
  .form-actions {
    flex-direction: column;
  }
  
  .checkbox-group, .radio-group {
    flex-direction: column;
  }
}
</style>
